<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1000" ref="dialogBodyRef" @open="openDialog">
  <!-- 列表 -->
  <ContentWrap>
      <el-table v-loading="loading" :data="list" class="cen">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="订单编号" align="center" prop="orderCode" />
        <!-- <el-table-column label="型号" align="center" prop="type" />
        <el-table-column label="织板编码" align="center" prop="code" />
        <el-table-column label="织板规格" align="center" prop="specification" />

        <el-table-column label="球拍型号" align="center" prop="racketModel"></el-table-column>
        <el-table-column label="张数" align="center" prop="sheetNum" />
        <el-table-column label="轻重" align="center" prop="weight" />
        <el-table-column label="裁剪尺寸" align="center" prop="cutSize" />
        <el-table-column label="刀数" align="center" prop="knivesNum" />
        <el-table-column label="数量" align="center" prop="amount" />
        <el-table-column label="裁剪理料" align="center" prop="materialsCut" />
        <el-table-column label="画线加层" align="center" prop="addLayers" />

        <el-table-column label="备料复核" align="center" prop="materialCheck" />
        <el-table-column label="发料" align="center" prop="issuMaterials" />
        <el-table-column label="备注" align="center" prop="remark" /> -->

        <el-table-column label="出库时间" align="center" prop="deliveryTime" />
        <el-table-column label="织板编码" align="center" prop="materialCode" />
        <el-table-column label="批次号" align="center" prop="batchCode" />
        <el-table-column label="箱码" align="center" prop="cartonCode" />
        <el-table-column label="供应商编号" align="center" prop="supplierId" />
        <el-table-column label="供应商" align="center" prop="supplierName" />
        <el-table-column label="成品型号" align="center" prop="type" />

        
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </Dialog>
  </template>
  
  <style>
    .el-table .warning-row {
      --el-table-tr-bg-color: var(--el-color-warning-light-9)!important;
    }
    .el-table .success-row {
      background-color: var(--el-color-success-light-9)!important;
    }
  </style>

  <script lang="ts" setup>
  import * as maOutboundReportApi from '@/api/hcxly/materialOutboundReport/Index'
  
  defineOptions({ name: 'maOutboundDetail' })
  
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据

  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    exCode: ''
  })
  const queryFormRef = ref() // 搜索的表单

  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
  
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await maOutboundReportApi.maOutboundReportDetail(queryParams)
      list.value = data.list
      total.value = data.total
      // console.log(list.value)
    } finally {
      loading.value = false
    }
  }
  
  /** 打开弹窗 */
  const open = async (id: string) => {
    queryParams.exCode = id
    // console.log(id)
    // console.log(queryParams)
    dialogVisible.value = true
    dialogTitle.value = '详情'
    // 修改时，设置数据
    if (id) {
      getList()
    }
  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗

  /** 设置dialog高度 */
  const dialogBodyRef = ref()
  const openDialog = () => {
  // 获取对话框 body 的 DOM 元素
  const dialogBodyRefInstance = dialogBodyRef.value;
  console.log(dialogBodyRefInstance.dialogContentRef);
  dialogBodyRefInstance.style = "height: 200px";
}
  </script>
  